import * as React from 'react';
import './pinglun.less'
import axios from 'axios'
import { Popup, Toast } from 'antd-mobile'
export interface IAppProps {
}

export default class Pinglun extends React.Component<IAppProps> {
  state = {
    listarr:[],
    visible: false,
  }

  componentDidMount() {
    this.getGreetList()
      setInterval(() => {
          let listarr = this.state.listarr;
          listarr.push(this.state.listarr[0])
          this.setState({ listarr:listarr.slice(1,) })
      }, 2000)
  }
  getSnapshotBeforeUpdate(oldProps:any, oldState:any) {
    let scrollarea = document.querySelector('.scrollarea') as HTMLAreaElement;
      return scrollarea.scrollHeight
  }
  componentDidUpdate(oldProps:any, oldState:any, val:any) {
    let scrollarea = document.querySelector('.scrollarea') as HTMLAreaElement;
      scrollarea.scrollTop += scrollarea.scrollHeight - val + 1
  }
  getGreetList = async () => {
    let {data:{data}} = await axios.get('http://localhost:3000/gretting')
    this.setState({listarr: data})
  }
  addGreet = async () => {
    let name = document.querySelector('.xingming') as HTMLInputElement;
    let desc = document.querySelector('.zhufu') as HTMLInputElement;
    if (!name.value)return Toast.show({content: '请输入姓名'})
    if (!desc.value)return Toast.show({content: '请输入祝福语'})
    await axios.post('http://localhost:3000/gretting',{name:name.value, desc:desc.value})
    Toast.show({icon: 'success', content: '祝福成功!'})
    this.setState({visible:false})
    name.value = '';
    desc.value = '';
    this.getGreetList()
  }
  public render() {
    return (
      <div className='pinglun'>
        <div className='scrollarea'>
          {
            this.state.listarr.map((item:any, index:number) => {
              return(
                <div key={index} >
                  <span>{item.name}: {item.desc}</span>
                  </div>
              )
            })
          }
        </div>
        <div className='liuyanban'>
          <div className='inputs' onClick={()=>this.setState({visible:true})}>留下你的祝福...</div>
          <div className='liwu'></div>
          <div className='xiaoxi'></div>
        </div>
        <Popup
          visible={this.state.visible}
          onMaskClick={() => {
            let name = document.querySelector('.xingming') as HTMLInputElement;
            let desc = document.querySelector('.zhufu') as HTMLInputElement;
            name.value = '';
            desc.value = '';
            this.setState({visible:false})
          }}
          bodyStyle={{
            borderTopLeftRadius: '16px',
            borderTopRightRadius: '16px',
            height:"18vh",
            boxSizing:"border-box",
            padding:"0.15rem"
          }}
        >
          <div className='names'><input type="text" placeholder='你的姓名' className='xingming'/></div>
          <div className='descs'><input type="text" placeholder='你的祝福' className='zhufu'/><button onClick={this.addGreet}>发送</button></div>
        </Popup>
      </div>
    )
  }
}
